<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伏特加 平台 - 我的数据集</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />

    <!-- Tailwind 配置 -->
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: "#165DFF",
              secondary: "#36CFC9",
              accent: "#722ED1",
              dark: "#1D2129",
              "gray-light": "#F2F3F5",
              "gray-medium": "#C9CDD4",
              "gray-dark": "#86909C",
            },
            fontFamily: {
              inter: ["Inter", "sans-serif"],
            },
          },
        },
      };
    </script>

    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }

        .sidebar-item-active {
          @apply bg-primary/10 text-primary border-l-4 border-primary;
        }

        .card-hover {
          @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
        }

        .btn-primary {
          @apply bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-all;
        }

        .btn-secondary {
          @apply bg-white text-primary border border-primary px-4 py-2 rounded-lg hover:bg-primary/5 transition-all;
        }

        .input-focus {
          @apply focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all;
        }
      }
    </style>
  </head>

  <body class="font-inter bg-gray-light min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm">
      <div
        class="container mx-auto px-4 py-3 flex justify-between items-center"
      >
        <div class="flex items-center space-x-2">
          <i class="fa fa-robot text-primary text-2xl"></i>
          <h1 class="text-xl font-bold text-dark">伏特加 平台</h1>
        </div>
        <div class="flex items-center space-x-4">
          <div class="relative">
            <input
              type="text"
              placeholder="搜索..."
              class="pl-10 pr-4 py-2 rounded-lg border border-gray-medium input-focus"
            />
            <i
              class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-dark"
            ></i>
          </div>
          <div class="flex items-center space-x-2">
            <img
              src="https://picsum.photos/id/1005/200/200"
              alt="用户头像"
              class="w-8 h-8 rounded-full object-cover"
            />
            <span class="hidden md:inline-block text-sm font-medium"
              >管理员</span
            >
          </div>
        </div>
      </div>
    </header>

    <div class="flex flex-1 overflow-hidden">
      <!-- 左侧导航栏 -->
      <aside
        id="sidebar"
        class="w-64 bg-white shadow-sm h-[calc(100vh-64px)] fixed left-0 overflow-y-auto transition-all duration-300 ease-in-out transform z-10"
      >
        <nav class="py-4">
          <div class="px-4 mb-4">
            <h2
              class="text-xs font-semibold text-gray-dark uppercase tracking-wider"
            >
              主导航
            </h2>
          </div>

          <a
            href="{{url_for('dashboard')}}"
            class="flex items-center px-4 py-3 hover:bg-gray-light"
          >
            <i class="fa fa-home w-6"></i>
            <span class="ml-2">首页</span>
          </a>

          <div class="nav-group">
            <div
              class="flex items-center justify-between px-4 py-3 bg-primary/10 text-primary border-l-4 border-primary cursor-pointer group-toggle"
            >
              <div class="flex items-center">
                <i class="fa fa-cogs w-6"></i>
                <span class="ml-2">模型处理</span>
              </div>
              <i
                class="fa fa-chevron-down text-xs transition-transform duration-300 group-toggle-icon transform rotate-180"
              ></i>
            </div>

            <div class="nav-submenu pl-10 py-2">
              <a
                href="{{ url_for('trans') }}"
                class="block px-4 py-2 text-sm hover:bg-gray-light rounded"
              >
                模型训练</a
              >
              <a
                href="{{ url_for('ceshi') }}"
                class="block px-4 py-2 text-sm hover:bg-gray-light rounded"
              >
                模型测试</a
              >
              <a
                href="#model-evaluation"
                class="block px-4 py-2 text-sm hover:bg-gray-light rounded"
              >
                模型评估</a
              >
            </div>
          </div>

          <a
            href="{{url_for('shujuji')}}"
            class="flex items-center px-4 py-3 bg-primary/10 text-primary border-l-4 border-primary"
          >
            <i class="fa fa-database w-6"></i>
            <span class="ml-2">数据集</span>
          </a>

          <a
            href="#model-analysis"
            class="flex items-center px-4 py-3 hover:bg-gray-light"
          >
            <i class="fa fa-bar-chart w-6"></i>
            <span class="ml-2">模型分析</span>
          </a>

          <a
            href="http://10.136.20.125:3000/"
            class="flex items-center px-4 py-3 hover:bg-gray-light"
          >
            <i class="fa fa-comments w-6"></i>
            <span class="ml-2">AI 对话</span>
          </a>

          <div class="px-4 pt-6 pb-2 mt-6 border-t border-gray-light">
            <h2
              class="text-xs font-semibold text-gray-dark uppercase tracking-wider"
            >
              设置
            </h2>
          </div>

          <a
            href="#settings"
            class="flex items-center px-4 py-3 hover:bg-gray-light"
          >
            <i class="fa fa-cog w-6"></i>
            <span class="ml-2">系统设置</span>
          </a>

          <a
            href="#help"
            class="flex items-center px-4 py-3 hover:bg-gray-light"
          >
            <i class="fa fa-question-circle w-6"></i>
            <span class="ml-2">帮助中心</span>
          </a>
        </nav>
      </aside>

      <!-- 主内容区 -->
      <main class="flex-1 ml-64 p-6 transition-all duration-300">
        <!-- 页面标题 -->
        <div class="mb-6">
          <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">
            我的数据集
          </h1>
          <p class="text-gray-dark mt-1">管理和上传你的数据集</p>
        </div>

        <!-- 数据集上传区域 -->
        <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
          <div
            class="border-2 border-dashed border-gray-medium rounded-lg p-8 text-center hover:border-primary transition-colors"
          >
            <i class="fa fa-cloud-upload text-4xl text-gray-dark mb-4"></i>
            <h3 class="text-lg font-medium mb-2">上传新数据集</h3>
            <p class="text-gray-dark mb-6">支持CSV, Excel, JSON和文本格式</p>

            <div class="flex flex-col sm:flex-row justify-center gap-4">
              <input type="file" class="hidden" id="datasetUpload" multiple />
              <label
                for="datasetUpload"
                class="btn-primary inline-block cursor-pointer"
              >
                <i class="fa fa-plus mr-2"></i> 选择文件
              </label>
              <button class="btn-secondary">
                <i class="fa fa-folder-open mr-2"></i> 从文件夹导入
              </button>
            </div>
          </div>
        </div>

        <!-- 数据集筛选和搜索 -->
        <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
          <div class="flex flex-col md:flex-row justify-between gap-4">
            <div class="flex flex-wrap gap-2">
              <button class="px-4 py-2 rounded-lg bg-primary text-white">
                全部
              </button>
              <button
                class="px-4 py-2 rounded-lg bg-gray-light hover:bg-gray-200 transition-colors"
              >
                训练集
              </button>
              <button
                class="px-4 py-2 rounded-lg bg-gray-light hover:bg-gray-200 transition-colors"
              >
                测试集
              </button>
              <button
                class="px-4 py-2 rounded-lg bg-gray-light hover:bg-gray-200 transition-colors"
              >
                验证集
              </button>
            </div>

            <div class="relative">
              <input
                type="text"
                placeholder="搜索数据集..."
                class="w-full sm:w-64 pl-10 pr-4 py-2 rounded-lg border border-gray-medium input-focus"
              />
              <i
                class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-dark"
              ></i>
            </div>
          </div>
        </div>

        <!-- 数据集列表 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <!-- 数据集卡片 1 -->
          <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
            <div class="h-48 bg-primary/10 relative">
              <div
                class="absolute top-3 right-3 bg-white rounded-full p-2 shadow-md"
              >
                <i class="fa fa-file-text-o text-primary"></i>
              </div>
              <div class="absolute inset-0 flex items-center justify-center">
                <canvas id="datasetChart1" width="300" height="200"></canvas>
              </div>
            </div>
            <div class="p-4">
              <div class="flex justify-between items-start mb-2">
                <h3 class="font-medium">负荷预测训练集</h3>
                <span
                  class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full"
                >
                  训练集
                </span>
              </div>
              <p class="text-sm text-gray-dark mb-4">
                电力负荷历史数据，用于训练负荷预测模型
              </p>
              <div class="flex justify-between text-sm text-gray-dark mb-4">
                <div><span class="font-medium">样本数:</span> 10,000</div>
                <div><span class="font-medium">特征数:</span> 15</div>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-xs text-gray-dark">上次更新: 2023-06-15</span>
                <div class="flex space-x-2">
                  <button
                    class="text-gray-dark hover:text-primary transition-colors"
                  >
                    <i class="fa fa-download"></i>
                  </button>
                  <button
                    class="text-gray-dark hover:text-primary transition-colors"
                  >
                    <i class="fa fa-bar-chart"></i>
                  </button>
                  <button
                    class="text-gray-dark hover:text-primary transition-colors"
                  >
                    <i class="fa fa-ellipsis-v"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 数据集卡片 2 -->
          <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
            <div class="h-48 bg-primary/10 relative">
              <div
                class="absolute top-3 right-3 bg-white rounded-full p-2 shadow-md"
              >
                <i class="fa fa-file-text-o text-primary"></i>
              </div>
              <div class="absolute inset-0 flex items-center justify-center">
                <canvas id="datasetChart2" width="300" height="200"></canvas>
              </div>
            </div>
            <div class="p-4">
              <div class="flex justify-between items-start mb-2">
                <h3 class="font-medium">负荷预测测试集</h3>
                <span
                  class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full"
                >
                  测试集
                </span>
              </div>
              <p class="text-sm text-gray-dark mb-4">
                电力负荷近期数据，用于测试负荷预测模型
              </p>
              <div class="flex justify-between text-sm text-gray-dark mb-4">
                <div><span class="font-medium">样本数:</span> 2,500</div>
                <div><span class="font-medium">特征数:</span> 15</div>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-xs text-gray-dark">上次更新: 2023-07-01</span>
                <div class="flex space-x-2">
                  <button
                    class="text-gray-dark hover:text-primary transition-colors"
                  >
                    <i class="fa fa-download"></i>
                  </button>
                  <button
                    class="text-gray-dark hover:text-primary transition-colors"
                  >
                    <i class="fa fa-bar-chart"></i>
                  </button>
                  <button
                    class="text-gray-dark hover:text-primary transition-colors"
                  >
                    <i class="fa fa-ellipsis-v"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 数据集卡片 3 -->
          <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
            <div class="h-48 bg-primary/10 relative">
              <div
                class="absolute top-3 right-3 bg-white rounded-full p-2 shadow-md"
              >
                <i class="fa fa-file-text-o text-primary"></i>
              </div>
              <div class="absolute inset-0 flex items-center justify-center">
                <canvas id="datasetChart3" width="300" height="200"></canvas>
              </div>
            </div>
            <div class="p-4">
              <div class="flex justify-between items-start mb-2">
                <h3 class="font-medium">用户行为数据集</h3>
                <span
                  class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full"
                >
                  验证集
                </span>
              </div>
              <p class="text-sm text-gray-dark mb-4">
                用户浏览和购买行为数据，用于推荐系统
              </p>
              <div class="flex justify-between text-sm text-gray-dark mb-4">
                <div><span class="font-medium">样本数:</span> 50,000</div>
                <div><span class="font-medium">特征数:</span> 20</div>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-xs text-gray-dark">上次更新: 2023-06-30</span>
                <div class="flex space-x-2">
                  <button
                    class="text-gray-dark hover:text-primary transition-colors"
                  >
                    <i class="fa fa-download"></i>
                  </button>
                  <button
                    class="text-gray-dark hover:text-primary transition-colors"
                  >
                    <i class="fa fa-bar-chart"></i>
                  </button>
                  <button
                    class="text-gray-dark hover:text-primary transition-colors"
                  >
                    <i class="fa fa-ellipsis-v"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 数据集卡片 4 -->
          <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
            <div class="h-48 bg-primary/10 relative">
              <div
                class="absolute top-3 right-3 bg-white rounded-full p-2 shadow-md"
              >
                <i class="fa fa-file-text-o text-primary"></i>
              </div>
              <div class="absolute inset-0 flex items-center justify-center">
                <canvas id="datasetChart4" width="300" height="200"></canvas>
              </div>
            </div>
            <div class="p-4">
              <div class="flex justify-between items-start mb-2">
                <h3 class="font-medium">图像分类训练集</h3>
                <span
                  class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full"
                >
                  训练集
                </span>
              </div>
              <p class="text-sm text-gray-dark mb-4">
                包含10个类别的图像数据，用于图像分类
              </p>
              <div class="flex justify-between text-sm text-gray-dark mb-4">
                <div><span class="font-medium">样本数:</span> 15,000</div>
                <div><span class="font-medium">类别数:</span> 10</div>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-xs text-gray-dark">上次更新: 2023-07-05</span>
                <div class="flex space-x-2">
                  <button
                    class="text-gray-dark hover:text-primary transition-colors"
                  >
                    <i class="fa fa-download"></i>
                  </button>
                  <button
                    class="text-gray-dark hover:text-primary transition-colors"
                  >
                    <i class="fa fa-bar-chart"></i>
                  </button>
                  <button
                    class="text-gray-dark hover:text-primary transition-colors"
                  >
                    <i class="fa fa-ellipsis-v"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 数据集卡片 5 -->
          <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
            <div class="h-48 bg-primary/10 relative">
              <div
                class="absolute top-3 right-3 bg-white rounded-full p-2 shadow-md"
              >
                <i class="fa fa-file-text-o text-primary"></i>
              </div>
              <div class="absolute inset-0 flex items-center justify-center">
                <canvas id="datasetChart5" width="300" height="200"></canvas>
              </div>
            </div>
            <div class="p-4">
              <div class="flex justify-between items-start mb-2">
                <h3 class="font-medium">文本情感分析集</h3>
                <span
                  class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full"
                >
                  测试集
                </span>
              </div>
              <p class="text-sm text-gray-dark mb-4">
                社交媒体文本数据，用于情感分析模型
              </p>
              <div class="flex justify-between text-sm text-gray-dark mb-4">
                <div><span class="font-medium">样本数:</span> 8,000</div>
                <div><span class="font-medium">类别数:</span> 3</div>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-xs text-gray-dark">上次更新: 2023-06-20</span>
                <div class="flex space-x-2">
                  <button
                    class="text-gray-dark hover:text-primary transition-colors"
                  >
                    <i class="fa fa-download"></i>
                  </button>
                  <button
                    class="text-gray-dark hover:text-primary transition-colors"
                  >
                    <i class="fa fa-bar-chart"></i>
                  </button>
                  <button
                    class="text-gray-dark hover:text-primary transition-colors"
                  >
                    <i class="fa fa-ellipsis-v"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 添加数据集卡片 -->
          <div
            class="bg-white rounded-xl shadow-sm border-2 border-dashed border-gray-medium flex items-center justify-center p-8 cursor-pointer hover:border-primary transition-colors"
          >
            <div class="text-center">
              <div
                class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4"
              >
                <i class="fa fa-plus text-2xl text-primary"></i>
              </div>
              <h3 class="font-medium">添加新数据集</h3>
              <p class="text-sm text-gray-dark mt-2">点击上传新的数据集文件</p>
            </div>
          </div>
        </div>

        <!-- 分页控件 -->
        <div class="mt-8 flex justify-center">
          <nav class="inline-flex rounded-md shadow-sm" aria-label="分页">
            <a
              href="#"
              class="px-3 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
            >
              <span class="sr-only">上一页</span>
              <i class="fa fa-chevron-left"></i>
            </a>
            <a
              href="#"
              class="px-3 py-2 border border-gray-300 bg-primary text-sm font-medium text-white"
            >
              1
            </a>
            <a
              href="#"
              class="px-3 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
            >
              2
            </a>
            <a
              href="#"
              class="px-3 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
            >
              3
            </a>
            <span
              class="px-3 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
            >
              ...
            </span>
            <a
              href="#"
              class="px-3 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
            >
              8
            </a>
            <a
              href="#"
              class="px-3 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
            >
              <span class="sr-only">下一页</span>
              <i class="fa fa-chevron-right"></i>
            </a>
          </nav>
        </div>
      </main>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // 导航菜单折叠功能
        const groupToggle = document.querySelector(".group-toggle");
        const submenu = document.querySelector(".nav-submenu");
        const toggleIcon = document.querySelector(".group-toggle-icon");

        if (groupToggle && submenu && toggleIcon) {
          groupToggle.addEventListener("click", function () {
            submenu.classList.toggle("hidden");
            toggleIcon.classList.toggle("rotate-180");
          });
        }

        // 移动端侧边栏切换
        const sidebarToggle = document.getElementById("sidebarToggle");
        const sidebar = document.getElementById("sidebar");
        const mainContent = document.querySelector("main");

        if (sidebarToggle) {
          sidebarToggle.addEventListener("click", function () {
            sidebar.classList.toggle("-translate-x-full");
            if (window.innerWidth < 1024) {
              mainContent.classList.toggle("ml-0");
              mainContent.classList.toggle("ml-64");
            }
          });
        }

        // 监听窗口大小变化，调整侧边栏
        window.addEventListener("resize", function () {
          if (window.innerWidth >= 1024) {
            sidebar.classList.remove("-translate-x-full");
            mainContent.classList.remove("ml-0");
            mainContent.classList.add("ml-64");
          } else if (!sidebar.classList.contains("sidebar-open")) {
            sidebar.classList.add("-translate-x-full");
            mainContent.classList.remove("ml-64");
            mainContent.classList.add("ml-0");
          }
        });

        // 文件上传事件
        const datasetUpload = document.getElementById("datasetUpload");
        if (datasetUpload) {
          datasetUpload.addEventListener("change", function (e) {
            if (e.target.files.length > 0) {
              const files = Array.from(e.target.files);
              // 这里可以添加文件上传逻辑
              console.log("上传文件:", files);

              // 显示上传成功消息或执行其他操作
              alert(`已选择 ${files.length} 个文件`);
            }
          });
        }

        // 初始化数据集图表
        function initDatasetCharts() {
          // 为每个数据集卡片创建图表
          const chartIds = [1, 2, 3, 4, 5];

          chartIds.forEach((id) => {
            const ctx = document.getElementById(`datasetChart${id}`);
            if (ctx) {
              // 根据数据集类型创建不同的图表
              let chartType = "line";
              let data = {};

              // 为不同的数据集生成不同的图表数据
              if (id === 1 || id === 2) {
                // 负荷预测数据 - 线性图
                const xValues = Array.from({ length: 20 }, (_, i) => i);
                const yValues = xValues.map(
                  (x) => Math.sin(x / 3) * 10 + 50 + Math.random() * 5
                );

                data = {
                  labels: xValues,
                  datasets: [
                    {
                      data: yValues,
                      borderColor: "#165DFF",
                      backgroundColor: "rgba(22, 93, 255, 0.1)",
                      tension: 0.4,
                      fill: true,
                    },
                  ],
                };
              } else if (id === 3) {
                // 用户行为数据 - 饼图
                chartType = "pie";
                data = {
                  labels: ["浏览", "收藏", "购买", "分享"],
                  datasets: [
                    {
                      data: [60, 15, 20, 5],
                      backgroundColor: [
                        "#165DFF",
                        "#36CFC9",
                        "#722ED1",
                        "#FF7D00",
                      ],
                      borderWidth: 0,
                    },
                  ],
                };
              } else if (id === 4) {
                // 图像分类数据 - 柱状图
                chartType = "bar";
                data = {
                  labels: [
                    "猫",
                    "狗",
                    "鸟",
                    "汽车",
                    "飞机",
                    "花",
                    "树",
                    "人",
                    "房子",
                    "水果",
                  ],
                  datasets: [
                    {
                      data: [
                        1500, 1400, 1300, 1200, 1100, 1000, 900, 800, 700, 600,
                      ],
                      backgroundColor: "#165DFF",
                    },
                  ],
                };
              } else if (id === 5) {
                // 文本情感分析数据 - 饼图
                chartType = "doughnut";
                data = {
                  labels: ["积极", "中性", "消极"],
                  datasets: [
                    {
                      data: [40, 45, 15],
                      backgroundColor: ["#52C41A", "#FAAD14", "#FF4D4F"],
                      borderWidth: 0,
                    },
                  ],
                };
              }

              // 创建图表
              new Chart(ctx, {
                type: chartType,
                data: data,
                options: {
                  responsive: true,
                  maintainAspectRatio: false,
                  plugins: {
                    legend: {
                      display: false,
                    },
                    tooltip: {
                      enabled: true,
                    },
                  },
                  scales: {
                    x: {
                      display: chartType === "line" || chartType === "bar",
                    },
                    y: {
                      display: chartType === "line" || chartType === "bar",
                    },
                  },
                },
              });
            }
          });
        }

        // 初始化图表
        initDatasetCharts();
      });
    </script>
  </body>
</html>
